<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    template="/WEB-INF/templates/baseLayout.xhtml">

	<ui:define name="title">
		<h:outputText value="DAMATE - #{msg['TabPanel.accountSettings']}" />
	</ui:define>

    <ui:define name="account">
        <p:panel styleClass="imgHeader generalInputFormPanel accountSettingsPanel">
            <f:facet name="header">
                <h:graphicImage library="images" name="user.png" />
                <h:outputText styleClass="title" value="#{msg['accountSettingsPage.userDetails.title']}" />
            </f:facet>

            <h:panelGrid id="editUserDetailsPanel" columns="2" styleClass="inputDataFields" columnClasses="label,value">
                <h:outputText value="#{msg['accountSettingsPage.userDetails.username']}" />
                <p:inputText value="#{accountSettingsManager.currentUser.username}" disabled="true" />
                <h:outputText value="#{msg['accountSettingsPage.userDetails.password']}" />
                <h:panelGroup rendered="#{accountSettingsManager.changePassword}">
                    <p:password id="id-password" value="#{accountSettingsManager.currentUser.password}" maxlength="16"
                                required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                                validatorMessage="#{msg['userManagement.inputFields.validationMessages.password.format']}">
                        <f:validateLength minimum="8" />
                        <f:validateRegex pattern="[a-zA-Z_0-9-.]+" />
                    </p:password>
                    <p:commandButton value="#{msg['Common.cancel']}" icon="cancel" immediate="true" update="editUserDetailsPanel" rendered="#{accountSettingsManager.changePassword}" style="margin-left: 5px">
                        <f:setPropertyActionListener value="false" target="#{accountSettingsManager.changePassword}" />
                    </p:commandButton>
                    <p:message for="id-password" />
                </h:panelGroup>
                <h:outputText value="#{msg['accountSettingsPage.userDetails.passwordConfirmation']}" rendered="#{accountSettingsManager.changePassword}" />
                <h:panelGroup rendered="#{accountSettingsManager.changePassword}">
                    <p:password id="id-conf-password" maxlength="16" required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                                validator="#{registrationManager.validatePassword}" />
                    <p:message for="id-conf-password" />
                </h:panelGroup>
                <h:panelGroup rendered="#{!accountSettingsManager.changePassword}">
                    <p:commandButton value="#{msg['Common.change']}" icon="edit" immediate="true" update="editUserDetailsPanel">
                        <f:setPropertyActionListener value="true" target="#{accountSettingsManager.changePassword}" />
                    </p:commandButton>
                </h:panelGroup>
                <h:outputText value="#{msg['accountSettingsPage.userDetails.firstName']}" />
                <h:panelGroup>
                    <p:inputText id="id-firstname" maxlength="45" value="#{accountSettingsManager.currentUser.firstname}"
                                 required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                                 validatorMessage="#{msg['userManagement.inputFields.validationMessages.name.length']}" >
                        <f:validateLength minimum="3" />
                    </p:inputText>
                    <p:message for="id-firstname" />
                </h:panelGroup>
                <h:outputText value="#{msg['accountSettingsPage.userDetails.lastName']}" />
                <h:panelGroup>
                    <p:inputText id="id-lastname" maxlength="45" value="#{accountSettingsManager.currentUser.lastname}"
                                 required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                                 validatorMessage="#{msg['userManagement.inputFields.validationMessages.name.length']}" >
                        <f:validateLength minimum="3" />
                    </p:inputText>
                    <p:message for="id-lastname" />
                </h:panelGroup>
                <h:outputText value="#{msg['accountSettingsPage.userDetails.sex']}" />
                <p:selectOneMenu styleClass="ui-selectonemenu-small" panelStyleClass="optionsPanel-small" value="#{accountSettingsManager.currentUser.sex}" >
                    <f:selectItem itemLabel="#{msg['accountSettingsPage.userDetails.sex.male']}" itemValue="true" />
                    <f:selectItem itemLabel="#{msg['accountSettingsPage.userDetails.sex.female']}" itemValue="false" />
                </p:selectOneMenu>
                <h:outputText value="#{msg['accountSettingsPage.userDetails.age']}" />
                <h:panelGroup>
                    <p:inputText id="id-age" maxlength="3" style="width: 24px" value="#{accountSettingsManager.currentUser.age}"
                                 required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                                 validatorMessage="#{msg['userManagement.inputFields.validationMessages.age']}"
                                 converterMessage="#{msg['userManagement.inputFields.validationMessages.age']}">
                        <f:convertNumber integerOnly="true" />
                        <f:validateLongRange minimum="18" maximum="99" />
                    </p:inputText>
                    <p:message for="id-age" />
                </h:panelGroup>
                <h:outputText value="#{msg['accountSettingsPage.userDetails.email']}" />
                <h:panelGroup>
                    <p:inputText id="id-email" maxlength="200" value="#{accountSettingsManager.currentUser.email}"
                                 required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                                 validatorMessage="#{msg['userManagement.inputFields.validationMessages.email']}">
                        <f:validateRegex pattern=".+@.+\.[a-z]+" />
                    </p:inputText>
                    <p:message for="id-email" />
                </h:panelGroup>
            </h:panelGrid>

            <p:commandButton value="#{msg['Common.update']}" icon="save" action="#{accountSettingsManager.update}" update="@form" />
        </p:panel>
	</ui:define>

    <ui:define name="onAfterPageLoad">
        <script type="text/javascript" language="JavaScript">
            $(document).ready(function (){
                selectTab("account");
            });
        </script>
    </ui:define>
</ui:composition>
